<template>
	<view class="box">
		<myNav title-color="#ffffff" :height="45" :isBlack="false" />
		<view class="my_box pdl-30 pdr-30">
			<view class="top">
				<view class="head_wrap flex-ac">
					<view class="head_img">
						<u-image width="105rpx" height="105rpx" src="/static/src/my/head_icon.png" mode="aspectFill" :lazy-load="true"></u-image>
					</view>
					<text class="flex1 mgl-24 head_name fs36 u-line-2">{{tel}}</text>
				</view>
			</view>
			<view class="container">
				<view class="card_box mgt-42">
					<u-image width="100%" height="235rpx" border-radius="14rpx" src="/static/src/my/apply_card_bg.png"
						mode="aspectFill" :lazy-load="true"></u-image>
					<view class="card_text">
						<view class="card_title fs26 pdt-32">最高可借金额(元)</view>
						<view class="flex1 flex-sb flex-ac">
							<text class="card_money fs81">20,000.00</text>
							<view class="card_apply_btn flex-ac fs28 pdl-35 pdr-35">立即申请</view>
						</view>
						<view class="desc fs22 mgt-10">
							综合年化成本<text class="interestRate">7.2%</text>起
						</view>
					</view>
				</view>
				<view class="grid_box mgt-20">
					<u-grid :col="3" :border="false">
						<u-grid-item v-for="(item, index) in gridList" :key="index" :custom-style="customStyle" @click="toLink(item.url)">
							<view class="flex-col flex-ac grid-item">
								<u-image width="64rpx" height="64rpx" :src="item.img" />
								<text class="grid-text mgt-10 fs24">{{ item.text }}</text>
							</view>
						</u-grid-item>
					</u-grid>
				</view>
				<view class="more_box mgt-37">
					<view class="title fs30 mgb-20">更多功能</view>
					<view class="cell flex-col">
						<view class="flex-ac flex-sb pdt-30 pdb-26 mgl-24 mgr-33"
							:class="index !== moreList.length -1 ? 'cell_line' :''" v-for="(item,index) in moreList"
							:key="index">
							<view class="flex-ac">
								<u-image width="38rpx" height="38rpx" :src="item.img" />
								<text class="mgl-15">{{item.text}}</text>
							</view>
							<u-icon name="arrow-right" color="#CCCCCC" size="28"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<myTabBar :current="1" @update="handleCurrent" />
</template>

<script lang="ts" setup>
	import { ref, computed } from 'vue';

	import { useInformation } from '@/store/modules/index.ts'

	import { onShow } from '@dcloudio/uni-app'

	import myTabBar from "../../components/myTabBar.vue"
	import myNav from "../../components/myNav.vue"

	import type { gridItem,cellItem } from "../../static/src/types/my"

	const user = useInformation()

	const tel = ref<string>("暂无姓名")
	const gridList = ref<gridItem[]>([
		{
			img: "/static/src/my/bill_icon.png",
			text: "我的账单",
			url:"/pages/statement/index"
		}, {
			img: '/static/src/my/bank_icon.png',
			text: '银行卡'
		}, {
			img: '/static/src/my/loan_record_icon.png',
			text: '借款记录',
		}
	])

	const moreList = ref<cellItem[]>([
		{
			img: "/static/src/my/concat_icon.png",
			text: "联系客服"
		},
		{
			img: "/static/src/my/set_icon.png",
			text: "设置"
		}
	])

	const customStyle = {
		paddingTop: '36rpx',
		paddingBottom: '41rpx',
	}

	const handleCurrent = (e : number) => {
		if (e === 0) {
			uni.switchTab({
				url: '/pages/index/index'
			})
		}
	}
	const toLink =(url:string)=>{
		uni.navigateTo({
			url:url
		})
	}
	onShow(() => {
		if (user.phoneNumber) {
			tel.value = user.phoneNumber
		}
	})
</script>

<style lang="scss" scoped>
	@import '@/style/style.scss';

	.box {
		height: 100%;
		min-height: 100vh;
		background: linear-gradient(0deg, #F2F3F7 73%, #283BC0 80%);

		.title {
			color: #ffffff;
			font-weight: bold;
			font-family: PingFang SC;
		}

		.my_box {
			.top {
				.head_wrap {
					.head_img {
						// border: 6rpx solid #ffffff;
						// border-radius: 50%;
						// background: #ffffff;
					}

					.head_name {
						color: #FFFFFF;
						font-family: PingFang SC;
						font-weight: bold;
					}
				}
			}

			.container {
				.card_box {
					position: relative;

					.card_text {
						position: absolute;
						top: 0;
						bottom: 0;
						left: 40rpx;
						right: 40rpx;

						.card_title {
							color: #6C4334;
							font-weight: bold;
							font-family: PingFang SC;
						}

						.card_money {
							color: #6C4334;
							font-weight: bold;
							font-family: DIN;
						}

						.card_apply_btn {
							min-width: 100rpx;
							height: 68rpx;
							color: #ffffff;
							background: linear-gradient(153deg, #DDB38E, #B6714B);
							border-radius: 34rpx;
							font-weight: 500;
							font-family: PingFang SC;
						}

						.desc {
							color: #C7955C;
							font-weight: 500;
							font-family: PingFang SC;

							.interestRate {
								color: #E9503B;
							}
						}
					}
				}

				.grid_box {
					border-radius: 10rpx;
					overflow: hidden;
					background: #fff;
					box-shadow: 0 0 0 1rpx #f1f5f9, 0 2rpx 4rpx rgba(0, 0, 0, .05), 0 12rpx 24rpx rgba(0, 0, 0, .05);

					.grid-item {
						color: #2D2E33;
						font-weight: 500;
						font-family: PingFang SC;
					}
				}

				.more_box {
					.title {
						color: #2D2E33;
						font-weight: bold;
						font-family: PingFang SC;
					}

					.cell {
						background: #FFFFFF;
						box-shadow: 0 0 0 1rpx #f1f5f9, 0 2rpx 4rpx rgba(0, 0, 0, .05), 0 12rpx 24rpx rgba(0, 0, 0, .05);
						border-radius: 10px;

						.cell_line {
							border-bottom: 1rpx solid #f1f1f1;
						}
					}

				}


			}
		}

	}
</style>